<template>
  <div id="invoiceDetail">
    <div class="blue-line"></div>
    <div class="block" style="margin-top: 0px; border-radius: 0px 0px 10px 10px;">
      <div class="head_title">纸质发票</div>
      <div class="detail">
        <div class="mark"><img src="./imgs/yikaipiao.png"></div>
        <p class="flex flex-start"><span class="title">发票抬头</span><span class="text">{{invoiceInfo.seller}}</span></p>
        <p class="flex flex-start"><span class="title">税号</span><span class="text">{{invoiceInfo.sellerTaxCode}}</span></p>
        <p class="flex flex-start"><span class="title">地址</span><span class="text">{{invoiceInfo.takerAddress}}</span></p>
        <p class="flex flex-start"><span class="title">电话</span><span class="text">{{invoiceInfo.takerPhone}}</span></p>
        <p v-if="invoiceInfo.sellerBank" class="flex flex-start"><span class="title">开户行和账号</span><span class="text">{{invoiceInfo.sellerBank}}</span></p>
        <p class="flex flex-start"><span class="title">发票内容</span><span class="text" v-if="invoiceInfo.type == '01'">租赁费</span><span v-else>服务费</span></p>
        <p class="flex flex-start"><span class="title">发票金额</span><span class="text">{{invoiceInfo.totalMoneyAmount}}元</span></p>
        <p class="flex flex-start"><span class="title">申请时间</span><span class="text">{{invoiceInfo.tsInsert | getFormateDate}}</span></p>
        <div style="clear: both;"></div>
      </div>
      <div class="line">
        <div class="left-coin"></div>
        <div class="right-coin"></div>
      </div>
      <div style="display: none;">
        <div style="line-height: 30px; text-align: center; font-size: 14px; font-weight: bold; border-bottom: 1px dashed #E5E5E5; padding-bottom: 10px;">物流信息</div>
        <div style="color: #999999; font-size: 12px; padding: 10px 0px 20px 0px;">物流单号：770000038493893853</div>
        <div class="timeline"> <!--时间轴代码-->
          <div class="time-item flex">
            <div class="time-data">
              <div class="time-data-his">12:20</div>
              <div class="time-data-ymr">2019-03-12</div>
            </div>
            <div class="time-line"><div class="quan"></div></div>
            <div class="time-info">
              <div class="time-title">北京市已签署</div>
              <div class="time-detail">什么公司的放</div>
            </div>
          </div>
          <div class="time-item flex">
            <div class="time-data">
              <div class="time-data-his">12:20</div>
              <div class="time-data-ymr">2019-03-12</div>
            </div>
            <div class="time-line"><div class="quan"></div></div>
            <div class="time-info">
              <div class="time-title">北京市已签署</div>
              <div class="time-detail">什么公司的放</div>
            </div>
          </div>
          <div class="time-item flex">
            <div class="time-data">
              <div class="time-data-his">12:20</div>
              <div class="time-data-ymr">2019-03-12</div>
            </div>
            <div class="time-line"><div class="quan"></div></div>
            <div class="time-info">
              <div class="time-title">北京市已签署</div>
              <div class="time-detail">什么公司的放</div>
            </div>
          </div>
        </div>
        <!--<el-timeline>
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :icon="activity.icon"
            :type="activity.type"
            :color="activity.color"
            :size="activity.size"
            :timestamp="activity.timestamp">
            {{activity.content}}
          </el-timeline-item>
        </el-timeline>-->
      </div>

    </div>

  </div>
</template>

<script>
  export default {
    name: 'company-invoiceDetail',
    data () {
      return {
        dataList: [{}],
        invoiceId: '',
        orderId: '',
        orderInfo: {},
        invoiceInfo:{},
        activities: [{
          content: '支持使用图标',
          timestamp: '2018-04-12 20:46',
          size: 'large',
          type: 'success',
          color: '#FF5D32',
          icon: 'el-icon-success'
        }, {
          content: '支持自定义颜色',
          timestamp: '2018-04-03 20:46',
          color: '#0bbd87'
        }, {
          content: '支持自定义尺寸',
          timestamp: '2018-04-03 20:46',
          size: 'large'
        }, {
          content: '默认样式的节点',
          type: 'info',
          timestamp: '2018-04-03 20:46'
        }, {
          content: '默认样式的节点',
          type: 'warning',
          timestamp: '2018-04-03 20:46'
        }, {
          content: '默认样式的节点',
          type: 'danger',
          timestamp: '2018-04-03 20:46'
        }]
      }
    },
    created () {
      this.invoiceId = this.$route.query.id?this.$route.query.id.toString():'';
      this.orderId = this.$route.query.orderId?this.$route.query.orderId.toString():'';
      this.type = this.$route.query.type?this.$route.query.type.toString():'';
//      this.getOrderInfo();
      this.getInvoiceInfo();
    },
    methods: {
      getOrderInfo() {
        this.$http.post('yxc/order/orderInfo',{
          id: this.orderId,
          carWxUserId: localStorage.getItem('wxUserId')
        }).then(res=>{
          if(res.code == 200) {
            this.orderInfo = res.data;
          }
        });
      },
      //获取发票信息
      getInvoiceInfo() {
//        this.$http.post('yxc/invoice/queryInfo?id='+this.invoiceId, {}).then(res=>{
        this.$http.post('yxc/invoice/queryList', {
          orderId: this.orderId,
          type: this.type
        }).then(res=>{
          if(res.code == 200) {
            this.invoiceInfo = res.data[0];
          }
        })
      }
    },

  }
</script>

<style lang="scss" scoped>
  #invoiceDetail {
    margin: 10px 10px;
    margin-bottom: 80px;
  }
  h3 {
    margin: 0px 0px;
    text-align: center;
    font-size: 15px;
  }
  .flex {
    display: flex;
  }
  .space-around {
    justify-content: space-around;
  }
  .space-between {
    justify-content: space-between;
  }
  .space-center{
    justify-content: center;
  }
  .flex-start{
    justify-content: flex-start;
  }
  .block {
    margin: 10px auto;
    border-radius: 10px;
    background-color: #fff;
    padding: 15px 15px;

  }

  .head_title{
    color: #C8001A;
    font-size: 16px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-weight: bold;
    background-image: url("../../assets/img/fp_back.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50px 30px;
  }

  .base_btn{display: inline-block; padding: 0px 20px;border-radius: 5px; height: 32px; line-height: 32px;text-align: center;}
  .detail{
    margin-top:10px;
    font-size:13px;
    border-top:1px dashed #EEEEEE;
    position: relative;
  }
  .detail p{color: #333333;}
  .detail p .title{width: 80px;color: #999999;}
  .detail p .text{flex:1;}
  .detail p .is-wait{color:#FF5D32; font-weight: bold;}
  .detail p .is-over{color:#999999 !important; font-weight: bold;}

  .mark{
    position: absolute;
    top: 50px; right: 0px;
    width: 70px; height: 95px;
    img{width: 100%;height: 100%;}
  }

  .line{width: 100%; border-bottom: 1px dashed #EEEEEE; margin: 10px auto;position: relative;}
  .left-coin{width: 10px; height: 10px; position: absolute; left: -20px; top:-5px; display: block; background-color: #f8f8f8; border-radius: 50%;}
  .right-coin{width: 10px; height: 10px; position: absolute; right: -20px; top:-5px; display: block; background-color: #f8f8f8; border-radius: 50%;}

  .blue-line{background-color: #1C67FF; height: 6px; border-radius:4px 4px 0px 0px;}


  /*时间轴样式*/
  .timeline{font-size: 12px;}
  .time-item{color: #999999;}
  .time-item .time-data{text-align: right;padding: 10px 10px; width: 80px;}
  .time-item .time-line{width:1px; background-color: #FF9600;height: auto; position: relative; margin: 0px 15px;}
  .time-item .time-line .quan{background-color: #FF9600; width: 9px; height: 9px; border-radius: 50%; position: absolute; left: -4px; bottom: 0px;}
  .time-item .time-info{padding: 10px 10px;}
  .timeline .time-item:first-child{font-weight: bold; color: #333333;}
  .timeline .time-item:first-child .time-line .quan {
    -webkit-box-shadow: 0px 0px 0px 4px rgba(255,150,0,0.6);
    -moz-box-shadow: 0px 0px 0px 4px rgba(255,150,0,0.6);
    box-shadow: 0px 0px 0px 4px rgba(255,150,0,0.6);
  }
</style>
<style>
  .el-step__icon-inner {
    font-weight: normal;
  }


</style>
